<template>
	<view class="content">
		<cfy-userprofile />
		<view v-if="hasLogin" class="hello">
			<view class="title">
				您好 {{userName}}，您已成功登录。
			</view>
			<view class="ul">
				<view>这是 uni-app 带登录模板的示例App首页。</view>
				<view>在 “我的” 中点击 “退出” 可以 “注销当前账户”</view>
			</view>
		</view>
		<view v-if="!hasLogin" class="hello">
			<view class="title">
				您好 游客。
			</view>
			<view class="ul">
				<view>这是 uni-app 带登录模板的示例App首页。</view>
				<view>在 “我的” 中点击 “登录” 可以 “登录您的账户”</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import cfyUserprofile from '../../components/cfy-userprofile/cfy-userprofile.vue'
	export default {
		components: { cfyUserprofile },
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		onLoad() {
			// 	if (!this.hasLogin) {
			// 		uni.showModal({
			// 			title: '未登录',
			// 			content: '您未登录，需要登录后才能继续',
			// 			/**
			// 			 * 如果需要强制登录，不显示取消按钮
			// 			 */
			// 			showCancel: !this.forcedLogin,
			// 			success: (res) => {
			// 				if (res.confirm) {
			// 					/**
			// 					 * 如果需要强制登录，使用reLaunch方式
			// 					 */
			// 					if (this.forcedLogin) {
			// 						uni.reLaunch({
			// 							url: '../login/login'
			// 						});
			// 					} else {
			// 						uni.navigateTo({
			// 							url: '../login/login'
			// 						});
			// 					}
			// 				}
			// 			}
			// 		});
			// 	}
			// 
		}
	}
</script>

<style>
	.hello {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.title {
		color: #8f8f94;
		margin-top: 50upx;
	}

	.ul {
		font-size: 30upx;
		color: #8f8f94;
		margin-top: 50upx;
	}

	.ul>view {
		line-height: 50upx;
	}
</style>
